<template>
    <mi-form-page @submit="submit" v-loading="edit.loading">
        <el-form :model="edit.info"
                 :rules="rules"
                 ref="formRef">

            <el-form-item prop="username" label="账号">
                <el-space fill>
                    <mi-input v-model="edit.info.username"/>
                    <mi-form-aux>用户名第一个字符必须为英文，只能由4-12位的字母、数字、汉字、下划线组成</mi-form-aux>
                </el-space>
            </el-form-item>

            <el-form-item prop="avatar" label="头像">
                <mi-upimg v-model="edit.info.avatar" />
            </el-form-item>

            <template v-if="!center">
                <el-form-item prop="group_id" label="角色">
                    <admin-group-select v-model="edit.info.group_id"/>
                </el-form-item>

                <el-form-item prop="realname" label="姓名">
                    <mi-input v-model="edit.info.realname"/>
                </el-form-item>

                <el-form-item prop="mobile" label="手机号">
                    <mi-input v-model="edit.info.mobile"/>
                </el-form-item>
            </template>

            <el-form-item prop="password" label="密码">
                <el-space fill>
                    <mi-input v-model="edit.info.password" type="password" show-password />
                    <mi-form-aux>密码必须包含字母、数字和符号中的两种，由8-16位组成</mi-form-aux>
                </el-space>

            </el-form-item>

            <el-form-item prop="status" label="状态" v-if="!center">
                <mi-switch v-model="edit.info.status"  />
            </el-form-item>

        </el-form>
    </mi-form-page>
</template>

<script setup lang="ts">
import {ref, onBeforeMount, inject} from "vue";
import {simpleGet} from "@/utils/request";
import {makeModelAuth} from "@/utils/auth";
import {FormInstance} from "element-plus";
import {useAdminStore} from "@/store/admin";
import List from "@/model/list";
import Edit from "@/model/edit";
import AdminGroupSelect from "@/views/auth/components/AdminGroupSelect.vue";

// center==true，表示来自个人中心的编辑，只能编辑当前登录用户自己的信息
const props = withDefaults(defineProps<{
    center?: boolean,
    edit: Edit,
    list?: List
}>(), {
    center: false,
})
const emits = defineEmits(['update:edit'])

const auth = makeModelAuth("auth.admin")
const rules : any = {
    username:[{required:true, message:'必填'}],
    group_id:[{required:true, message:'必填'}],
}
if (!props.center){
    rules.group_id = [{required:true, message:'必填'}]
    rules.status = [{required:true, message:'必填'}]
}
const formRef = ref<FormInstance>()
const groupOptions = ref([])
const admin = useAdminStore()



const submit = () => {
    let url:string = "/"
    if (props.center){
        url = url + auth.edit
    } else {
        if (props.list?.currentRow){
            url += auth.edit
        }else{
            url += auth.add
        }
    }
    props.edit.submit({
        formRef:  formRef.value,
        url: url,
        list: props.list,
        success: (edit:Edit) => {
            if (props.center){  // 当前登录用户修改个人信息，更新到状态管理
                admin.info = edit.info
            }
        }
    })
}

onBeforeMount(() => {
    props.edit.init(async () => {
        let id: number
        if (props.center) {
            id = admin.info.id
        }else{
            // 请求角色选项
            // let optionsRes = await simpleGet('/auth.adminGroup/options')
            // groupOptions.value = optionsRes.options
            id = props.list?.currentRow?.id
        }

        if (id){
            // 请求表单数据
            let res = await simpleGet('/' + auth.edit, {id:id})
            props.edit.info = res.info
        }else{
            props.edit.info = {
                status:1,
            }
        }
    })
})

</script>

<style scoped>

</style>
